<template>
  <div class="flexcenter">
    <video
      class="demo-video"
      ref="player"
      muted
      autoplay
      style="width: 460px; height: 320px"
    ></video>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  data() {
    return {
      id: "1",
      rtsp: "rtsp://admin:VYYPAX@192.168.6.130:554/h264/ch1/main/av_stream",
      player: null,
    };
  },
  mounted() {
    if (flvjs.isSupported()) {
      let video = this.$refs.player;
      if (video) {
        this.player = flvjs.createPlayer({
          type: "flv",
          isLive: true,
          url: `ws://localhost:9005/rtsp/${this.id}/?url=${this.rtsp}`,
        });
        this.player.attachMediaElement(video);
        try {
          this.player.load();
          this.player.play();
        } catch (error) {
          console.log(error);
        }
      }
    }
  },
  beforeUnmount() {
    this.player.destory();
  },
};
</script>
<style>
.flexcenter {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
.demo-video {
  max-width: 880px;
  max-height: 660px;
}
</style>
